<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
    <h2>{{fullName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const vue = new Vue({
        el:'#app',
        data:{
            firstName: 'Kobe',
            lastName: 'Bryant',
        },
        computed:{
            //简写（相当于只使用的computed的get方法）
            // fullName:function () {
            //   return this.firstName + ' ' + this.lastName;
            // }


            // 完整写法,下面的fullName是一个属性,有set和get两个方法
            //计算属性一般不设置set方法，一般只使用get方法，相当于只读属性
            fullName:{
                set:function(newValue){
                    console.log('----');
                    console.log("这里调用了computed的set方法",newValue);
                    const names = newValue.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[1];
                },
                get:function(){
                  return this.firstName + ' ' + this.lastName;
                }
            }
        }
    })
</script>

</body>
</html>